import React from "react"
import {
  ButtonProps,
  Col,
  Input,
  Row,
  Button,
  DatePicker,
  Select,
  Space
} from "antd"
import { SearchOutlined } from "@ant-design/icons"
import moment from "moment"

interface ComponentProps {
  col: number
  key: string | string[]
  type: string
  label?: string
  labelwidth?: number
  placeholder?: string | [string, string]
}

interface IButton extends ButtonProps {
  label: string
}

interface Props {
  buttonProps?: Omit<IButton, "type">[]
  componentProps: ComponentProps[]
  queryParams: { [key: string]: any }
  setQueryParams: (Object) => void
  getList: () => void
}

const { Option } = Select

const TableToolbar: React.FC<Props> = ({
  buttonProps,
  componentProps,
  queryParams,
  setQueryParams,
  getList
}) => {
  const dateFormat = "YYYY/MM/DD"

  const changeParams = (data) => {
    setQueryParams({ ...queryParams, ...data })
  }

  const input = (props) => (
    <Col className="gutter-row" span={props.col} key={props.key}>
      <div className="p-1" />
      <div className="flex items-center">
        {props.label ? (
          <div
            className="text-right"
            style={{ width: props.labelwidth || "auto", marginRight: 5 }}
          >
            {props.label}
          </div>
        ) : null}
        <Input
          allowClear
          {...props}
          onChange={(e) => changeParams({ [props.key]: e.target.value })}
        />
      </div>
    </Col>
  )

  const select = (props) => (
    <Col className="gutter-row" span={props.col} key={props.key}>
      <div className="p-1" />
      <div className="flex items-center">
        {props.label ? (
          <div
            className="text-right"
            style={{ width: props.labelwidth || "auto", marginRight: 5 }}
          >
            {props.label}
          </div>
        ) : null}
        <Select
          allowClear
          defaultValue="lucy"
          style={{ width: "100%" }}
          onChange={(v) => changeParams({ [props.key]: v })}
        >
          {[1, 2, 3].map((item) => (
            <Option value="jack" key={item}>
              Jack
            </Option>
          ))}
        </Select>
      </div>
    </Col>
  )

  const rangePicker = (attributes) => {
    const props = { ...attributes }
    const key = typeof props.key === "string" ? props.key : props.key[0]
    props.placeholder = ["开始日期", "结束日期"]
    return (
      <Col className="gutter-row" span={props.col} key={key}>
        <div className="p-1" />
        <div className="flex items-center">
          {props.label ? (
            <div
              className="text-right"
              style={{ width: props.labelwidth || "auto", marginRight: 5 }}
            >
              {props.label}
            </div>
          ) : null}
          <DatePicker.RangePicker
            {...props}
            format={dateFormat}
            onChange={(e) => {
              if (e) {
                changeParams({
                  [props.key[0]]: moment(e[0]).format("YYYY/MM/DD"),
                  [props.key[1]]: moment(e[1]).format("YYYY/MM/DD")
                })
              } else {
                changeParams({ [props.key[0]]: "", [props.key[1]]: "" })
              }
            }}
          />
        </div>
      </Col>
    )
  }

  const searchBtn = () => (
    <Col className="gutter-row" span={4} key="searchBtn">
      <div className="p-1" />
      <Button type="primary" icon={<SearchOutlined />} onClick={getList}>
        搜索
      </Button>
    </Col>
  )

  // 填充空白
  const col = (rowGrid) => (
    <Col className="gutter-row" span={rowGrid} key={rowGrid}>
      <div className="p-1" />
    </Col>
  )

  // 合成渲染数据
  const assembles = () => {
    let index = 0
    let rowGrid = 24
    const assemble: JSX.Element[][] = []
    componentProps.forEach((item) => {
      if (!assemble[index]) {
        assemble[index] = []
      }
      if (rowGrid - item.col < 0) {
        assemble[index].push(col(rowGrid))
        index += 1
        rowGrid = 24
      }

      switch (item.type) {
        case "input":
          assemble[index].push(input(item))
          break
        case "select":
          assemble[index].push(select(item))
          break
        case "rangePicker":
          assemble[index].push(rangePicker(item))
          break
        default:
      }
    })

    if (rowGrid - 4 < 0) {
      assemble[index].push(col(rowGrid))
      index += 1
      rowGrid = 24
    }
    assemble[index].push(searchBtn())
    assemble[index].push(col(rowGrid))

    return assemble
  }

  /**
   * 功能按键
   */
  const initButtons = () => {
    const buttons: JSX.Element[] = []
    const button = (args: IButton) => (
      <Button {...args} type={args.type || "primary"} key={args.label}>
        {args.label}
      </Button>
    )
    if (buttonProps) {
      buttonProps.forEach((args) => buttons.push(button(args)))
    }
    return buttons
  }

  return (
    <>
      {assembles().map((item, index) => (
        // eslint-disable-next-line react/no-array-index-key
        <Row gutter={16} key={index}>
          {item.map((element) => element)}
        </Row>
      ))}
      <Space size="middle" className="flex flex-warp mb-4">
        {initButtons().map((element) => element)}
      </Space>
    </>
  )
}

export default TableToolbar
